<template>
	<view class="page" :style="bodyMinHeight">
		<block v-if="!isShowxx">
			<!-- 播放器 -->
			<view class="player-box bg-my-gray minHeight">
				<!-- #ifdef APP-PLUS -->
					<block v-if="tvMask">
						<view :style="videoStyle">
							<view class="tv-mask" :style="tvMaskBgStyle">
								<view class="tv-mask-title">投屏中</view>
								<view class="tv-mask-btn">
									<view @tap="sendtv"><text class="cuIcon-order"></text> 切换</view>
									<view @tap="exittv"><text class="cuIcon-exit"></text> 退出</view>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view v-if="videoUrl" :style="videoStyle">
							<video
								id="myVideo"
								:src="videoUrl"
								@error="videoErrorCallback"
								:initial-time="currentTime"
								:show-mute-btn="true"
								controls
								:style="videoStyle"
								:autoplay="true"
								:title="videoInfo.title"
								:enable-play-gesture="true"
								:vslide-gesture="true"
								:page-gesture="true"
								@fullscreenchange="listenFullScreen"
							>
							</video>
						</view>
					</block>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
					<view v-if="videoUrl">
						<video
							id="myVideo"
							:show-casting-button="true"
							:show-screen-lock-button="true"
							:src="videoUrl"
							@error="videoErrorCallback"
							:initial-time="currentTime"
							:show-mute-btn="true"
							controls
							:style="videoStyle"
							:autoplay="true"
							:title="videoInfo.title"
							:enable-play-gesture="true"
							:vslide-gesture="true"
							enable-danmu
							:page-gesture="true"
							:ad-unit-id="videoAd"
							@fullscreenchange="listenFullScreen"
						>
						</video>
					</view>
				<!-- #endif -->
				<!-- #ifdef MP-QQ -->
					<view v-if="videoUrl">
						<video
							id="myVideo"
							:show-casting-button="true"
							:show-screen-lock-button="true"
							:src="videoUrl"
							@error="videoErrorCallback"
							:initial-time="currentTime"
							:show-mute-btn="true"
							controls
							:style="videoStyle"
							:autoplay="true"
							:title="videoInfo.title"
							:enable-play-gesture="true"
							:vslide-gesture="true"
							enable-danmu
							:page-gesture="true"
							:ad-unit-id="videoAd"
							@fullscreenchange="listenFullScreen"
						>
						</video>
					</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
					<view :style="videoStyle" id="myVideo"></view>
				<!-- #endif -->
			</view>
			<!-- 内容 -->
			<!-- #ifdef H5 -->
			<view :style="contentStyle">
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="padding-top-3" :style="contentStyle">
			<!-- #endif -->
				<view class="solid-bottom">
					<view class="cu-bar">
						<view class="action fl">
							<text class="text-lg">{{liveInfo.title}}</text>
						</view>
						<view class="fr">
						</view>
					</view>
				</view>
				<view class="solid-bottom">
					<view class="cu-bar xuanji">
						<view class="action fl">
							<text class="text-lg">切换源</text>
						</view>
						<view class="fr">
							<text class="text-grey text-df video-more-text">共{{liveInfo.videoYuan}}个源</text>
						</view>
					</view>
					<view class='padding-sm flex flex-wrap grid col-5'>
						<scroll-view scroll-x class="nav" scroll-with-animation :scroll-left="scrollLeft">
							<view class="cu-item video-level cu-tag" :class="index == TabCur ? 'bg-blue' : 'light bg-grey'" v-for="(item,index) in liveInfo.url_list" :key="index" @tap="tabSelect" :data-id="index">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 底部广告 -->
				<view class="player-bottom-ad padding-5" v-if="playerBottomAD.isshow && playerBottomAD.ad_type < 3">
					<image :src="playerBottomAD.img" @click="goBottomAd()"></image>
				</view>
				<Adview :adSwitchKg="playerBottomAD.isshow" :homeADList="playerBottomAD" v-else></Adview>
				<!-- #ifdef APP-PLUS -->
				<tvSearch :isShow="tvIsShow" :videoUrls="videoUrl"></tvSearch>
				<!-- #endif -->
				<!-- 广告弹窗 -->
				<uni-popup v-if="playerAd.ad_type != 5" ref="image" type="center" :show="showAdModel" :custom="true" :mask-click="false">
					<view class="uni-image" :style="playerADStyle">
						<view class="uni-image-close" @click="playerADCancel('image')">
							<uni-icons type="clear" color="#dddddd" size="25" />
						</view> 
						<image class="image" :src=" playerAd.img ? apiImageUrl + playerAd.img : '/static/ad.png'" mode="" @click="goAd"/>
					</view>
				</uni-popup>
				<!-- 菜单modal -->
				<view class="cu-modal bottom-modal" :class="modalName=='titleNviewButton'?'show':''">
					<view class="cu-dialog xuanji-box bg-my-gray" :style="menuBoxStyle">
						<view class="cu-bar line-bottom-my-gray">
							<view class="action text-gray">菜单</view>
							<view class="action text-gray" @tap="hideModal"><text class="cuIcon-close"></text></view>
						</view>
						<view class="cu-list menu sm-border" style="width: 100%;">
							<view class="cu-item arrow bg-my-gray line-bottom-my-gray-sm">
								<button class="cu-btn content" @tap="sendtv">
									<text class="cuIcon-btn text-olive"></text>
									<text class="text-grey">投屏</text>
								</button>
							</view>
							<!-- <view class="cu-item arrow"> -->
								<!-- #ifdef APP-PLUS -->
								<!-- <button class="cu-btn content" @tap="shareBtn">
									<text class="cuIcon-share text-olive"></text>
									<text class="text-grey">分享</text>
								</button> -->
								<!-- #endif -->
							<!-- </view> -->
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="mask">
				<view class="text-df refresh-text text-gray">
					<image class="refresh-img" src="../../static/noinfo.png"></image>
					<view class="" >敬请期待</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	// 小程序插屏广告
	let interstitialAd = null;
	import hex_md5 from '@/common/md5.js';
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import tvSearch from '@/components/tvSearch/tvSearch.vue';
	import Adview from '@/components/home-ad/ad-view.vue';
	export default {
		components: {
			uniPopup,
			uniIcon,
			tvSearch,
			Adview
		},
		data() {
			return {
				tvMaskBgStyle:'',
				menuBoxStyle: '',
				isShowxx: false,
				videoAd: '',
				tvMaskStyle: '',
				imageUrl: this.$helper.imageUrl,
				apiImageUrl: this.$helper.apiImageUrl,
				danmuContent: '',
				showAdModel: false,
				playerADImg: '',
				playerADStyle: '',
				xuanjiBoxStyle: '',
				xuanjiItemBoxStyle: '',
				modalName: '',
				bodyMinHeight: '',
				scrollLeft: 0,
				TabCur: 0,
				isback: false,
				isLike: false,
				videoInfo: {
					title: '',
					playIndex: 0
				},
				liveInfo: null,
				vod_id: 0,
				videoType: 0,
				vid: 0,
				videoStyle: '',
				videoUrl: '',
				currentTime: 0,
				videoContext: null,
				gobackView: null,
				windowInfo: {
					statusBarHeight: 0,
					windowHeight: 0,
					windowWidth: 0,
					trueHeight: 0
				},
				contentStyle: '',
				playerAd: {
					img: '',
					url: 'http://www.baidu.com'
				},
				playerBottomAD: {
					img: '/static/ad.png',
					url: 'http://www.baidu.com',
					isshow: 0
				},
				tvIsShow: false,
				tvTitle: '正在搜寻设备...',
				isIos: this.$os == "ios",
				tvMask: false
			}
		},
		onShow() {
			let config = uni.getStorageSync('sys_config');
			this.isShowxx = isNaN(parseInt(config.show_xx)) ? true : parseInt(config.show_xx);
		},
		onLoad() {
			let liveInfo = uni.getStorageSync('liveInfo');
			this.liveInfo = liveInfo;
			this.liveInfo.videoYuan = liveInfo.url_list.length;
			// #ifndef H5
				this.videoContext = uni.createVideoContext('myVideo');
			// #endif
		},
		onNavigationBarButtonTap(){
			// #ifndef APP-PLUS
				uni.showModal({
					title: '提示',
					content: '该功能只支持APP端',
					showCancel: false,
					confirmColor: "#45506a"
				})
				return false;
			// #endif
			this.modalName = "titleNviewButton";
		},
		mounted() {
			this.init();
			let _this = this;
			uni.$on('showTvMask',function(){
				_this.tvMask = true;
				setTimeout(function(){
					_this.videoContext.pause();
				}, 500)
			})
		},
		methods:{
			videoErrorCallback (e) {
				console.log(e);
			},
			listenFullScreen(event) {
				if (event.detail.fullScreen) {
					
				}
			},
			hideModal() {
				this.modalName = null
			},
			shareBtn(){
				let _this = this;
				// 该功能为测试功能，因目前没有微信开放平台帐号，无法继续完善
				uni.share({
				    provider: "weixin",
				    scene: "WXSceneSession",
				    type: 0,
				    href: _this.$helper.shareUrl,
				    title: _this.videoInfo.title,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
			},
			titleNview (title){
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				let currentWebview = page.$getAppWebview();
				let tn = currentWebview.getStyle().titleNView;
				tn.titleText = title;
				currentWebview.setStyle({
				    titleNView: tn
				});
			},
			closeTvMask () {
				this.tvMask = false;
				this.videoContext.play();
				uni.$emit('stopTvPlay');
			},
			sendtv (){
				// #ifdef APP-PLUS
					var _this = this;
					_this.tvIsShow = true;
					_this.hideModal();
					uni.$emit('tvModelInit');
				// #endif
			},
			exittv () {
				this.tvIsShow = false;
				this.tvMask = false;
				uni.$emit('stopTvPlay');
				this.videoContext.play();
			},
			playerADCancel () {
				let _this = this;
				// 是否显示弹窗广告
				let sysconf = uni.getStorageSync('sys_config');
				if(sysconf.ad_close == 1) {
					_this.goAd();
				}else{
					_this.$refs['image'].close();
					_this.drowVideoBox();
				}
			},
			drowVideoBox () {
				// #ifdef APP-PLUS
				this.videoStyle = 'position:absolute;background: rgb(0, 0, 0);z-index:1;width:100%;height:'+(this.windowInfo.trueHeight/3.4)+'px;';
				this.tvMaskBgStyle = 'height:'+(this.windowInfo.trueHeight/3.4)+'px;';
				// #endif
				// #ifdef MP
				this.videoStyle = 'position:absolute;background: rgb(0, 0, 0);z-index:1;width:100%;height:'+(this.windowInfo.trueHeight/3)+'px;';
				// #endif
				this.palyer();
			},
			goBottomAd () {
				let _this = this;
				// #ifdef H5
					window.open(this.playerBottomAD.url);
				// #endif
				// #ifndef H5
					plus.runtime.openWeb(this.playerBottomAD.url);
				// #endif
			},
			init () {
				var _this = this;
				const res = uni.getSystemInfoSync();
				_this.windowInfo.statusBarHeight = res.statusBarHeight;
				_this.windowInfo.windowHeight = res.windowHeight;
				_this.windowInfo.windowWidth = res.windowWidth;
				_this.windowInfo.trueHeight = _this.windowInfo.windowHeight - _this.windowInfo.statusBarHeight;
				// #ifdef MP
					let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					_this.windowInfo.trueHeight = _this.windowInfo.windowHeight - _this.windowInfo.statusBarHeight - menuButtonInfo.height;
				// #endif
				
				// #ifdef APP-PLUS
				// 顶部遮罩高度
				if (_this.isShowxx) {
					_this.statusMaskTop = 'text-align: center;';
				}
				// #endif
				
				_this.bodyMinHeight = 'min-height:'+_this.windowInfo.windowHeight+'px;overflow: hidden;';
				
				// 内容容器
				// #ifdef H5
				_this.contentStyle = 'overflow-y:auto; z-index:0;position:relative;height: ' + (_this.windowInfo.trueHeight - (_this.windowInfo.trueHeight/3.4)) + 'px';
				// #endif
				
				// #ifndef H5
					_this.contentStyle = 'overflow-y:auto; z-index:0;position:relative; height: 100vh;padding-top: ' + (_this.windowInfo.trueHeight/3.4) + 'px';
					// #ifdef MP
						_this.contentStyle = 'overflow-y:auto; z-index:0;position:relative; height: 100vh;padding-top: ' + (_this.windowInfo.trueHeight/3) + 'px';
					// #endif
					if (_this.isShowxx) {
						_this.contentStyle = 'overflow-y:auto; z-index:0;position:relative;height: ' + _this.windowInfo.trueHeight + 'px';
						// #ifdef MP
						_this.contentStyle = 'overflow-y:auto; z-index:0;position:relative;height: ' + (_this.windowInfo.trueHeight - (_this.windowInfo.trueHeight/3.4)) + 'px';
						// #endif
					}
				// #endif
				
				// 选集高度
				_this.xuanjiBoxStyle = 'max-height: ' + (_this.windowInfo.trueHeight - (_this.windowInfo.trueHeight/3)) + 'px;';
				_this.menuBoxStyle = 'height: ' + (_this.windowInfo.trueHeight - (_this.windowInfo.trueHeight/3)) + 'px;';
				_this.xuanjiItemBoxStyle = 'max-height: ' + (_this.windowInfo.trueHeight - (_this.windowInfo.trueHeight/3) - 100) + 'px;';
				// 广告图片大小
				_this.playerADStyle = 'z-index:10000;width: ' + (_this.windowInfo.windowWidth - 65) + 'px; height: ' + (_this.windowInfo.trueHeight - 150) + 'px;';
				// 投屏遮罩
				_this.tvMaskStyle = 'width: 100%;text-align: center;line-height: 400upx;background-color: #000000;font-size: 18px;color: #ffffff;height: ' + (_this.windowInfo.trueHeight/3.4) + 'px';
				// 广告
				_this.showAd();
			},
			goAd () {
				// #ifdef H5
					window.open(this.playerAd.url);
				// #endif
				// #ifndef H5
					plus.runtime.openWeb(this.playerAd.url);
				// #endif
			},
			showAd() {
				let _this = this;
				// 是否显示弹窗广告
				let sysconf = uni.getStorageSync('sys_config');
				if (sysconf.player_show_ad == 1) {
					// 请求服务器，获取弹窗广告和底部
					_this.$http.post('/index/home/getPlayerAdList',{}).then((res)=>{
						if (res.data.alert_ad.hasOwnProperty('img')) {
							uni.setStorageSync('adInfo', res.data);
							if (res.data.alert_ad.ad_type != 5) {
								_this.showAdModel = true;
								_this.playerAd = res.data.alert_ad;
								_this.$refs['image'].open();
							} else {
								// #ifdef MP-WEIXIN
									// 创建插屏组件
									if (wx.createInterstitialAd) {
										interstitialAd = wx.createInterstitialAd({
											adUnitId: res.data.alert_ad.url
										})
										// 15秒内只能弹一次
										setTimeout(function(){
											interstitialAd.show();
										}, 15500);
										interstitialAd.onLoad(() => {})
										interstitialAd.onError((err) => {})
										interstitialAd.onClose(() => {})
									}
								// #endif
							}
						}
						if (sysconf.player_bottom_ad == 1 && res.data.alert_public.hasOwnProperty('img')) {
							_this.playerBottomAD = res.data.alert_public;
							_this.playerBottomAD.img = _this.apiImageUrl + res.data.alert_public.img;
							_this.playerBottomAD.url = res.data.alert_public.url;
							_this.playerBottomAD.isshow = 1;
						}
						if (sysconf.show_video_ad == 1 && res.data.video_ad.hasOwnProperty('img')) {
							// #ifdef MP
								_this.videoAd = res.data.video_ad.url;
							// #endif
						}
						_this.drowVideoBox();
					}).catch((err)=>{
						
					})
				}else if (sysconf.player_bottom_ad == 1) {
					// 请求服务器，获取弹窗广告和底部
					_this.$http.post('/index/home/getPlayerAdList',{}).then((res)=>{
						if (res.data.alert_public.hasOwnProperty('img')) {
							uni.setStorageSync('adInfo', res.data);
							_this.playerBottomAD = res.data.alert_public;
							_this.playerBottomAD.img = _this.apiImageUrl + res.data.alert_public.img;
							_this.playerBottomAD.url = res.data.alert_public.url;
							_this.playerBottomAD.isshow = 1;
						}else{
							_this.playerBottomAD.isshow = 0;
						}
						if (sysconf.show_video_ad == 1 && res.data.video_ad.hasOwnProperty('img')) {
							// #ifdef MP
								_this.videoAd = res.data.video_ad.url;
							// #endif
						}
						_this.drowVideoBox();
					}).catch((err)=>{
						
					})
				} else if (sysconf.show_video_ad == 1) {
					_this.$http.post('/index/home/getPlayerAdList',{}).then((res)=>{
						uni.setStorageSync('adInfo', res.data);
						if (res.data.video_ad.hasOwnProperty('img')) {
							// #ifdef MP
								_this.videoAd = res.data.video_ad.url;
							// #endif
						}
						_this.drowVideoBox();
					}).catch((err)=>{
						
					})
				} else {
					// 视频容器
					_this.drowVideoBox();
				}
			},
			palyer () {
				let _this = this;
				_this.videoUrl = _this.liveInfo.url_list[0].url;
				_this.videoInfo.title = _this.liveInfo.title;
				// 设置H5端播放器
				// #ifdef H5
					const dp = new DPlayer({
					    container: document.getElementById('myVideo'),
						autoplay: true,
					    video: {
					        url: _this.videoUrl,
					        type: 'hls'
					    }
					});
				// #endif
				
				// #ifndef H5
				// 视频信息
				setTimeout(function(){
					_this.changeVideoInfo(_this.TabCur);
				}, 1300)
				// #endif
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.videoContext.stop();
				this.changeVideoInfo(e.currentTarget.dataset.id)
			},
			changeVideoInfo(index){
				var _this = this;
				_this.TabCur = index;
				_this.videoUrl = _this.liveInfo.url_list[index].url;
				// #ifndef H5
					// 视频信息
					setTimeout(function(){
						_this.videoContext.play();
					}, 1000)
				// #endif
			},
		},
	}
</script>

<style>
	.page{
		background-color: #161827!important;
	}
	/* 插屏广告 */
	.uni-image {
		position: relative;
	}
	
	.uni-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-image-close {
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 2;
	}
	.player-bottom-ad image{
		width: 100%;
		height: 270upx;
	}
	
	cover-view,
	cover-image {
		display: inline-block;
	}
	
	/* .tv-img {
		position: absolute;
		width: 60rpx;
		height: 50rpx;
		top: 5%;
		left: 200px;
		z-index: 99999;
	} */
	.controls-sendtv{
		color: #FFFFFF;
		width: 60upx;
		height: 40upx;
		right: 35upx;
		top: 45upx;
		position: absolute;
	}
	.video-title {
		flex-direction: row!important;
		width: 90%;
		justify-content: space-between!important;
	}
	.showxx-title {
		text-align: center;
	}
	.xuanji-bottom {
		padding: 30upx;
	}
	.xuanji-box {
		border-top-left-radius: 10upx!important;
		border-top-right-radius: 10upx!important;
	}
	.xuanji-item {
		border-radius: 10upx!important;
	}
	.xuanji-item-box {
		overflow-y: auto;
	}
	.nav .cu-item{
		height: 30px!important;
		line-height: 30px!important;
	}
	.tv-mask {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		background-image: url("");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
	}
	.tv-mask-title {
		font-size: 40upx;
	}
	.tv-mask-btn {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 40%;
		padding: 72upx 0;
	}
	.rate{
	  position: absolute;
	  width: 100rpx;
	  height: auto;
	  font-size: 22rpx;
	  text-align: center;
	  display:box;
	  display:-webkit-box;
	  display:-webkit-flex;
	  display:-moz-box;
	  display:-ms-flexbox;
	  display:flex;
	  flex-wrap: wrap;
	  flex-direction: row;
	  overflow: hidden;
	  top:21%;
	  right:-100rpx;
	  border-top-left-radius: 20rpx;
	  border-bottom-left-radius: 20rpx;
	  align-items: center;
	  justify-content: center;
	  background-color: rgba(0,0,0,0.6);
	}
	.rateBtn{
	  position: absolute;
	  width: 100rpx;
	  height: 60rpx;
	  font-size: 22rpx;
	  display:box;
	  display:-webkit-box;
	  display:-webkit-flex;
	  display:-moz-box;
	  display:-ms-flexbox;
	  display:flex;
	  flex-wrap: wrap;
	  flex-direction: row;
	  overflow: hidden;
	  text-align: center;
	  right: 0rpx;
	  right:-100rpx;
	  border-top-left-radius: 20rpx;
	  border-bottom-left-radius: 20rpx;
	  top:40%;
	  align-items: center;
	  justify-content: center;
	  background-color: rgba(0,0,0,0.6);
	}
	.numb{
	  font-size: 24rpx;
	  color:#fff;
	  width: 90rpx;
	  height: 60rpx;
	  line-height: 60rpx;
	  border-top-left-radius: 20rpx;
	  border-bottom-left-radius: 20rpx;
	  display:box;
	  display:-webkit-box;
	  display:-webkit-flex;
	  display:-moz-box;
	  display:-ms-flexbox;
	  display:flex;
	  align-items: center;
	  justify-content: center;
	}
</style>
